<template>
  <div class="RRdetal">
    <card :title="visibleType + '信息'">
      <div class="inputBox detail">
        <div class="item" v-for="item in infoList" :key="item.id">
          <div class="lable">{{ item.title }}</div>
          <el-input v-model="item.value" disabled></el-input>
        </div>
        <!-- <div class="item">
          <div class="lable">排序</div>
          <el-input v-model="dialogFrom.name" placeholder="排序"></el-input>
        </div> -->
      </div>
    </card>
    <card title="实时信息">
      <div class="empty-c">
        <img src="@/assets/image/waterMap/emp.png" alt="" srcset="" />
        <div>暂无数据</div>
      </div>
      <!-- <div class="inputBox">
        <div class="item">
          <div class="lable">日期</div>
          <el-input v-model="dialogFrom.name" placeholder="全部"></el-input>
        </div>
        <div class="item">
          <div class="lable">测站</div>
          <el-input v-model="dialogFrom.name" placeholder="排序"></el-input>
        </div>
      </div>
      <div style="width: 100%; height: calc(100% - 210px)">
        <myEcharts :option="castomOption"></myEcharts>
      </div> -->
    </card>
  </div>
</template>
<style lang="scss" scope></style>
<script>
import myEcharts from "@/components/myEcharts/index.vue";
import card from "@/components/panel/card.vue";
export default {
  components: { card, myEcharts },
  props: {
    panelDetail: {
      type: Object,
      default: () => ({}),
    },
    panelName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dialogFrom: {
        name: "",
      },
      castomOption: {},
      infoList: [],
      visibleType: "",
    };
  },
  watch: {
    panelDetail: {
      handler(newValue, oldValue) {
        this.infoList = newValue?.data;
        (newValue?.data || []).forEach(element => {
          if (element.index == 1) {
            this.visibleType = element.title.split("名称")[0];
          }
        });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    console.log(this.panelDetail);
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      let xData = ["2018年", "2019年", "2020年", "2021年"];
      let thirdIndustry = [8, 15, 34, 31]; //第三产业
      this.castomOption = {
        grid: {
          top: "12%",
          left: "3%",
          right: "3%",
          bottom: "20%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          show: true,
          left: "left",
          padding: [10, 0, 0, 50],
          //   orient: "vertical",
          //   left: "center",
          //   bottom: "bottom",
          //   padding: [10, 0, 0, 0],
          //   data: legendData,
          //   textStyle: {
          //     color: "rgba(36, 173, 254, 1)",
          //     fontSize: "1rem",
          //   },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            interval: 1,
            axisLabel: {
              color: "rgba(0, 20, 45, 0.50)",
              fontSize: "1rem",
            },
            axisLine: {
              show: false,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            // min: 0,
            // max: 100,
            // interval: 20,
            axisLabel: {
              formatter: "{value} ",
            },
            axisLabel: {
              textStyle: {
                //坐标轴颜色
                color: "rgba(0, 20, 45, 0.50)",
                fontSize: "1rem",
              },
            },
            //坐标轴线样式
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed", //solid实线;dashed虚线
                color: "rgba(0, 20, 45, 0.10)",
              },
            },
          },
        ],
        series: [
          {
            name: "水位",
            data: thirdIndustry,
            type: "line",
            smooth: false, //true曲线; false折线
            itemStyle: {
              normal: {
                color: "#24adfe", //改变折线点的颜色
                lineStyle: {
                  color: "#24adfe", //改变折线颜色
                  type: "solid",
                },
              },
            },
            areaStyle: {
              //折线图颜色半透明
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(36,173,254, 0.5)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(52,112,252, 0.1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.RRdetal {
  height: 100%;
  .card {
    height: calc(50% - 13px);
    // overflow: auto;
  }
  .detail {
    height: calc(100% - 35px);
    overflow: auto;
  }
  .inputBox {
    // height: 358px;
    // padding: 0px 15px 0px 15px;
    .item {
      margin: 8px;
      align-items: center;
      .lable {
        font-size: 16px;
        text-align: left;
        line-height: 35px;
      }
    }
  }
}
</style>
